<template>
  <div>
    <a-card style="height: 95vh"  size="small">
      <!-- 按钮 -->
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'btn_query'" @click="queryTableList">{{$t('menuItem.QueryUser')}}
            </a-button>
            <a-button type="primary" v-has="'btn_export'" @click="exportExcel">{{$t('btn.export')}}
            </a-button>
            <a-button type="primary" v-has="'btn_clean'" @click="cleanData">{{$t('btn.cleanAll')}}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.startTime')" >
                <a-date-picker
                    v-model="queryForm.startValue"
                    :disabled-date="disabledStartDate"
                    valueFormat="YYYY-MM-DD"
                    @openChange="handleStartOpenChange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.endTime')" >
                <a-date-picker
                    v-model="queryForm.endValue"
                    :disabled-date="disabledEndDate"
                    valueFormat="YYYY-MM-DD"
                    :open="endOpen"
                    @openChange="handleEndOpenChange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.LotId')">
                <a-select
                    v-model="queryForm.lotId"
                    show-search
                    :filter-option="filterOption"
                    allowClear
                    :placeholder="$t('menuItem.LotIdWarn')"
                    showArrow
                    @search="lotIdSearch"
                >
                  <a-select-option v-for="item in lotList" :key="item.lotId">
                    {{ item.lotId }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>
      <!-- table -->
      <a-row>
        <a-col :span="24">
          <m-table
              :columns="columns"
              :dataSource="dataSource"
              :loading="loadTable"
              bordered
              :rowKey="(record,index)=>{return index}"
              :pagination=dataPagination
          >
          </m-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import {message} from "ant-design-vue";
import MTable from "../../components/MTable";
export default {
  name: "PackageHistoryReport",
  components: {MTable},
  data() {
    return{
      endOpen: false,
      columns: [
        {
          title: this.$t('menuItem.UserTableId'),
          dataIndex: "key",
          key: "key",
          width: 80,
          align: 'center'
        },
        {
          title: this.$t('menuItem.LotId'),
          dataIndex: 'lotId',
          key: 'lotId',
          align: 'center',
          width: 150,
          scopedSlots: {customRender: 'lotId'},
        },
        {
          title: this.$t('menuItem.ProductId'),
          dataIndex: 'productName',
          key: 'productName',
          align: 'center',
        },
        {
          title: this.$t('menuItem.Pri'),
          dataIndex: 'priInt',
          key: 'priInt',
          align: 'center',
        },
        {
          title: this.$t('menuItem.Quantity'),
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'center'
        },
        {
          title: this.$t('menuItem.Type'),
          dataIndex: 'type',
          key: 'type',
          align: 'center',
        },
        {
          title: this.$t('menuItem.packJobInTime'),
          dataIndex: 'packJobInTime',
          key: 'packJobInTime',
          align: 'center',
        },
        {
          title: this.$t('menuItem.packJobOutTime'),
          dataIndex: 'packJobOutTime',
          key: 'packJobOutTime',
          align: 'center',
        },
      ],
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('PackageHistoryReport', ['lotList','queryForm','dataSource','loadTable','capForm','dataPagination']),
  },
  methods: {
    ...mapMutations('PackageHistoryReport', ['setDataPagination','queryLotList','queryTableList','cleanData','exportExcel','setQueryForm']),
    // 下拉框搜索
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    disabledStartDate(startValue) {
      const endValue = this.queryForm.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.queryForm.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    setTableHeight(){
      let pageSize = parseInt((document.documentElement.clientHeight - 300) / 41)
      this.setDataPagination({
        ...this.dataPagination,
        pageSize: pageSize,
      })
    },
    lotIdSearch(data){
      this.queryLotList(data);
    },
  },
  watch:{
    windowHeight(val){
      this.setTableHeight()
    }
  },
  beforeMount() {
    this.setTableHeight()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    // 查询工号/用户名下拉框数据
    this.queryLotList()
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>
